<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康与环境监测工具</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }

        :root {
            --primary-bg: #e6e7ee;
            --secondary-bg: #ffffff;
            --shadow-light: #ffffff;
            --shadow-dark: #d1d9e6;
            --accent-color: #4ecdc4;
            --accent-gradient: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
            --success-color: #4ecdc4;
            --danger-color: #ff6b6b;
            --warning-color: #feca57;
            --info-color: #667eea;
            --text-primary: #2d3748;
            --text-secondary: #718096;
            --glass-bg: rgba(255, 255, 255, 0.25);
            --glass-border: rgba(255, 255, 255, 0.18);
        }

        body {
            background: var(--primary-bg);
            color: var(--text-primary);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.3s ease;
            animation: pageLoad 0.8s ease;
        }

        @keyframes pageLoad {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .container {
            width: 100%;
            max-width: 1200px;
            background: var(--primary-bg);
            border-radius: 30px;
            padding: 40px;
            box-shadow: 20px 20px 60px var(--shadow-dark), -20px -20px 60px var(--shadow-light);
            margin-top: 20px;
            transition: all 0.3s ease;
            animation: containerFloat 1s ease 0.2s both;
        }

        @keyframes containerFloat {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: var(--primary-bg);
            border-radius: 25px;
            box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px var(--shadow-light);
            animation: headerSlide 0.8s ease 0.4s both;
        }

        @keyframes headerSlide {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 {
            font-size: 3.2rem;
            margin-bottom: 15px;
            background: var(--accent-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 700;
            animation: titleGlow 3s ease-in-out infinite alternate;
        }

        @keyframes titleGlow {
            from {
                filter: brightness(1);
            }
            to {
                filter: brightness(1.2);
            }
        }

        .subtitle {
            font-size: 1.3rem;
            color: var(--text-secondary);
            margin-bottom: 30px;
            font-weight: 500;
        }

        .test-categories {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
            animation: categoriesSlide 0.8s ease 0.6s both;
        }

        @keyframes categoriesSlide {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .test-category {
            background: var(--primary-bg);
            border-radius: 25px;
            padding: 30px;
            box-shadow: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .test-category::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.8s;
        }

        .test-category:hover::before {
            left: 100%;
        }

        .test-category:hover {
            transform: translateY(-5px);
            box-shadow: 16px 16px 32px var(--shadow-dark), -16px -16px 32px var(--shadow-light);
        }

        .category-title {
            font-size: 1.6rem;
            margin-bottom: 20px;
            color: var(--accent-color);
            display: flex;
            align-items: center;
            font-weight: 600;
        }

        .category-title::before {
            content: attr(data-icon);
            margin-right: 12px;
            font-size: 1.8rem;
            animation: iconBounce 2s ease-in-out infinite;
        }

        @keyframes iconBounce {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }

        .test-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .test-btn {
            background: var(--primary-bg);
            color: var(--text-primary);
            border: none;
            padding: 16px 24px;
            border-radius: 15px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            font-size: 1rem;
            box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
            position: relative;
            overflow: hidden;
        }

        .test-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .test-btn:hover::before {
            left: 100%;
        }

        .test-btn:hover {
            transform: translateY(-3px);
            box-shadow: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light);
        }

        .test-btn:active {
            transform: translateY(0);
            box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
        }

        /* 检测面板样式 */
        .detection-panel {
            background: var(--primary-bg);
            border-radius: 25px;
            padding: 30px;
            margin-top: 30px;
            box-shadow: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light);
            display: none;
            animation: panelSlideIn 0.5s ease;
        }

        @keyframes panelSlideIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .detection-panel.active {
            display: block;
        }

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(78, 205, 196, 0.2);
        }

        .panel-title {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--accent-color);
        }

        .close-btn {
            background: var(--danger-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .close-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
        }

        /* 噪音检测 */
        .noise-detector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            align-items: center;
        }

        .noise-visual {
            background: var(--primary-bg);
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            box-shadow: inset 8px 8px 16px var(--shadow-dark), inset -8px -8px 16px var(--shadow-light);
        }

        .decibel-meter {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 0 auto 20px;
            position: relative;
            background: conic-gradient(from 0deg, #4ecdc4 0deg, #feca57 120deg, #ff6b6b 240deg, #ff6b6b 360deg);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .decibel-meter::before {
            content: '';
            position: absolute;
            width: 160px;
            height: 160px;
            background: var(--primary-bg);
            border-radius: 50%;
            box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
        }

        .decibel-value {
            position: relative;
            z-index: 2;
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--accent-color);
        }

        .decibel-unit {
            font-size: 1rem;
            color: var(--text-secondary);
        }

        .noise-controls {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .control-group {
            background: var(--primary-bg);
            border-radius: 15px;
            padding: 20px;
            box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
        }

        .control-label {
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 10px;
            display: block;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            border-radius: 10px;
            font-weight: 600;
            margin-top: 10px;
        }

        .status-safe {
            background: rgba(78, 205, 196, 0.2);
            color: var(--success-color);
            border: 2px solid var(--success-color);
        }

        .status-warning {
            background: rgba(254, 202, 87, 0.2);
            color: var(--warning-color);
            border: 2px solid var(--warning-color);
        }

        .status-danger {
            background: rgba(255, 107, 107, 0.2);
            color: var(--danger-color);
            border: 2px solid var(--danger-color);
        }

        /* 光强检测 */
        .light-detector {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .light-metric {
            background: var(--primary-bg);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
        }

        .metric-value {
            font-size: 2rem;
            font-weight: bold;
            color: var(--accent-color);
            margin-bottom: 5px;
        }

        .metric-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 500;
        }

        .metric-unit {
            color: var(--text-secondary);
            font-size: 1rem;
            font-weight: 500;
        }

        /* 温度估算 */
        .temperature-estimator {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .temperature-input {
            background: var(--primary-bg);
            border-radius: 15px;
            padding: 20px;
            box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .input-group input, .input-group select {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 10px;
            background: var(--primary-bg);
            box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
            font-size: 1rem;
            color: var(--text-primary);
        }

        .input-group input:focus, .input-group select:focus {
            outline: none;
            box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light), 0 0 0 2px var(--accent-color);
        }

        .temperature-result {
            background: var(--primary-bg);
            border-radius: 15px;
            padding: 20px;
            box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
            text-align: center;
        }

        .temp-display {
            font-size: 3rem;
            font-weight: bold;
            color: var(--accent-color);
            margin-bottom: 10px;
        }

        .temp-description {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin-bottom: 20px;
        }

        .temp-suggestions {
            background: rgba(78, 205, 196, 0.1);
            border-radius: 10px;
            padding: 15px;
            border-left: 4px solid var(--accent-color);
        }

        .temp-suggestions h4 {
            color: var(--accent-color);
            margin-bottom: 10px;
        }

        .temp-suggestions ul {
            text-align: left;
            padding-left: 20px;
        }

        .temp-suggestions li {
            margin-bottom: 5px;
            color: var(--text-secondary);
        }

        .test-button {
            background: var(--accent-gradient);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 15px;
            cursor: pointer;
            font-weight: 600;
            font-size: 1rem;
            margin: 15px 0;
            transition: all 0.3s ease;
            box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
        }

        .test-button:hover {
            transform: translateY(-3px);
            box-shadow: 12px 12px 24px var(--shadow-dark), -12px -12px 24px var(--shadow-light), 0 0 30px rgba(78, 205, 196, 0.3);
        }

        .instructions {
            background: var(--primary-bg);
            border-radius: 25px;
            padding: 30px;
            margin-top: 40px;
            box-shadow: 10px 10px 20px var(--shadow-dark), -10px -10px 20px var(--shadow-light);
        }

        .instructions h3 {
            color: var(--accent-color);
            margin-bottom: 20px;
            font-size: 1.4rem;
            font-weight: 600;
        }

        .instructions ul {
            padding-left: 25px;
            margin-bottom: 20px;
        }

        .instructions li {
            margin-bottom: 12px;
            line-height: 1.7;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .instructions p {
            color: var(--text-secondary);
            font-style: italic;
            font-weight: 500;
            padding: 15px;
            background: rgba(78, 205, 196, 0.1);
            border-radius: 15px;
            border-left: 4px solid var(--accent-color);
        }

        footer {
            margin-top: 40px;
            text-align: center;
            color: var(--text-secondary);
            font-size: 0.95rem;
            padding: 25px;
            background: var(--primary-bg);
            border-radius: 20px;
            box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light);
        }

        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2.5rem;
            }
            
            .test-categories {
                grid-template-columns: 1fr;
            }
            
            .noise-detector, .temperature-estimator {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>🌡️ 健康与环境监测</h1>
            <p class="subtitle">专业的健康环境检测工具，守护您的生活品质</p>
        </header>

        <div class="test-categories">
            <div class="test-category">
                <h3 class="category-title" data-icon="🔊">噪音监测</h3>
                <div class="test-buttons">
                    <button class="test-btn" onclick="startNoiseDetection()">环境噪音检测</button>
                    <button class="test-btn" onclick="startSleepNoiseTest()">睡眠环境评估</button>
                    <button class="test-btn" onclick="startWorkNoiseTest()">工作环境评估</button>
                </div>
            </div>

            <div class="test-category">
                <h3 class="category-title" data-icon="💡">光照监测</h3>
                <div class="test-buttons">
                    <button class="test-btn" onclick="startLightDetection()">室内光强检测</button>
                    <button class="test-btn" onclick="startReadingLightTest()">阅读光线评估</button>
                    <button class="test-btn" onclick="startScreenLightTest()">屏幕使用环境</button>
                </div>
            </div>

            <div class="test-category">
                <h3 class="category-title" data-icon="🌡️">温度监测</h3>
                <div class="test-buttons">
                    <button class="test-btn" onclick="startTemperatureEstimation()">室内温度估算</button>
                    <button class="test-btn" onclick="startComfortTest()">舒适度评估</button>
                    <button class="test-btn" onclick="startEnergyAdvice()">节能建议</button>
                </div>
            </div>

            <div class="test-category">
                <h3 class="category-title" data-icon="🌿">空气质量</h3>
                <div class="test-buttons">
                    <button class="test-btn" onclick="startAirQualityTest()">空气质量评估</button>
                    <button class="test-btn" onclick="startHumidityTest()">湿度检测</button>
                    <button class="test-btn" onclick="startVentilationTest()">通风效果评估</button>
                </div>
            </div>
        </div>

        <!-- 噪音检测面板 -->
        <div id="noisePanel" class="detection-panel">
            <div class="panel-header">
                <h3 class="panel-title">🔊 环境噪音检测</h3>
                <button class="close-btn" onclick="closePanel('noisePanel')">关闭</button>
            </div>
            <div class="noise-detector">
                <div class="noise-visual">
                    <div class="decibel-meter">
                        <div class="decibel-value">
                            <span id="decibelValue">45</span>
                            <div class="decibel-unit">dB</div>
                        </div>
                    </div>
                    <p>实时噪音监测</p>
                </div>
                <div class="noise-controls">
                    <div class="control-group">
                        <label class="control-label">环境评估</label>
                        <div id="noiseStatus" class="status-indicator status-safe">
                            <span>✅</span>
                            <span>环境安静</span>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">检测控制</label>
                        <button class="test-button" onclick="startNoiseMonitoring()">开始监测</button>
                        <button class="test-button" onclick="stopNoiseMonitoring()">停止监测</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 光照检测面板 -->
        <div id="lightPanel" class="detection-panel">
            <div class="panel-header">
                <h3 class="panel-title">💡 室内光强检测</h3>
                <button class="close-btn" onclick="closePanel('lightPanel')">关闭</button>
            </div>
            <div class="light-detector">
                <div class="light-metric">
                    <div class="metric-value" id="luxValue">300</div>
                    <div class="metric-label">照度 <span class="metric-unit">lux</span></div>
                </div>
                <div class="light-metric">
                    <div class="metric-value" id="brightnessValue">65</div>
                    <div class="metric-label">亮度 <span class="metric-unit">%</span></div>
                </div>
                <div class="light-metric">
                    <div class="metric-value" id="colorTempValue">4000</div>
                    <div class="metric-label">色温 <span class="metric-unit">K</span></div>
                </div>
                <div class="light-metric">
                    <div class="metric-value" id="uvIndexValue">2</div>
                    <div class="metric-label">紫外线指数</div>
                </div>
            </div>
            <button class="test-button" onclick="startLightMonitoring()">开始检测</button>
            <div id="lightAdvice" class="temp-suggestions" style="margin-top: 20px; display: none;">
                <h4>💡 光照建议</h4>
                <ul id="lightAdviceList"></ul>
            </div>
        </div>

        <!-- 温度估算面板 -->
        <div id="temperaturePanel" class="detection-panel">
            <div class="panel-header">
                <h3 class="panel-title">🌡️ 室内温度估算</h3>
                <button class="close-btn" onclick="closePanel('temperaturePanel')">关闭</button>
            </div>
            <div class="temperature-estimator">
                <div class="temperature-input">
                    <div class="input-group">
                        <label>所在城市</label>
                        <input type="text" id="cityInput" placeholder="请输入城市名称" value="北京">
                    </div>
                    <div class="input-group">
                        <label>房间类型</label>
                        <select id="roomType">
                            <option value="living">客厅</option>
                            <option value="bedroom">卧室</option>
                            <option value="kitchen">厨房</option>
                            <option value="bathroom">浴室</option>
                            <option value="study">书房</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label>房间朝向</label>
                        <select id="roomDirection">
                            <option value="south">南向</option>
                            <option value="north">北向</option>
                            <option value="east">东向</option>
                            <option value="west">西向</option>
                            <option value="southeast">东南</option>
                            <option value="southwest">西南</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <label>楼层</label>
                        <input type="number" id="floorInput" placeholder="楼层" value="5" min="1" max="50">
                    </div>
                    <button class="test-button" onclick="calculateTemperature()">计算温度</button>
                </div>
                <div class="temperature-result">
                    <div class="temp-display" id="tempDisplay">22°C</div>
                    <div class="temp-description" id="tempDescription">舒适温度</div>
                    <div class="temp-suggestions">
                        <h4>🏠 环境建议</h4>
                        <ul id="tempAdviceList">
                            <li>当前温度适宜，无需调节</li>
                            <li>建议保持室内通风</li>
                            <li>注意适当增减衣物</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="instructions">
            <h3>📋 使用说明</h3>
            <ul>
                <li><strong>噪音检测：</strong>通过麦克风获取环境噪音强度，评估是否影响睡眠和工作</li>
                <li><strong>光照检测：</strong>检测室内光线强度，提供阅读和工作环境优化建议</li>
                <li><strong>温度估算：</strong>结合地理位置和房间信息，估算室内温度并提供节能建议</li>
                <li><strong>空气质量：</strong>评估室内空气质量，提供通风和净化建议</li>
            </ul>
            <p>💡 提示：本工具基于设备传感器和算法估算，实际数据可能存在偏差，仅供参考。</p>
        </div>

        <footer>
            <p>© 2024 健康环境监测工具 - 关注您的生活环境品质</p>
        </footer>
    </div>

    <script>
        // 全局变量
        let noiseMonitoringInterval;
        let lightMonitoringInterval;
        let audioContext;
        let analyser;
        let microphone;

        // 显示检测面板
        function showPanel(panelId) {
            const panels = document.querySelectorAll('.detection-panel');
            panels.forEach(panel => panel.classList.remove('active'));
            document.getElementById(panelId).classList.add('active');
        }

        // 关闭检测面板
        function closePanel(panelId) {
            document.getElementById(panelId).classList.remove('active');
            
            if (panelId === 'noisePanel') {
                stopNoiseMonitoring();
            } else if (panelId === 'lightPanel') {
                stopLightMonitoring();
            }
        }

        // 噪音检测功能
        function startNoiseDetection() {
            showPanel('noisePanel');
        }

        function startSleepNoiseTest() {
            showPanel('noisePanel');
            // 模拟睡眠环境噪音检测
            simulateNoiseLevel(35, '睡眠环境');
        }

        function startWorkNoiseTest() {
            showPanel('noisePanel');
            // 模拟工作环境噪音检测
            simulateNoiseLevel(50, '工作环境');
        }

        function startNoiseMonitoring() {
            // 尝试获取麦克风权限
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia({ audio: true })
                    .then(stream => {
                        audioContext = new (window.AudioContext || window.webkitAudioContext)();
                        analyser = audioContext.createAnalyser();
                        microphone = audioContext.createMediaStreamSource(stream);
                        microphone.connect(analyser);
                        analyser.fftSize = 256;
                        
                        const bufferLength = analyser.frequencyBinCount;
                        const dataArray = new Uint8Array(bufferLength);
                        
                        noiseMonitoringInterval = setInterval(() => {
                            analyser.getByteFrequencyData(dataArray);
                            const average = dataArray.reduce((a, b) => a + b) / bufferLength;
                            const decibel = Math.round(20 * Math.log10(average) + 60);
                            updateNoiseDisplay(Math.max(30, Math.min(100, decibel)));
                        }, 100);
                    })
                    .catch(error => {
                        console.log('麦克风访问被拒绝，使用模拟数据');
                        simulateNoiseMonitoring();
                    });
            } else {
                simulateNoiseMonitoring();
            }
        }

        function simulateNoiseMonitoring() {
            noiseMonitoringInterval = setInterval(() => {
                const baseNoise = 45;
                const variation = (Math.random() - 0.5) * 20;
                const currentNoise = Math.round(baseNoise + variation);
                updateNoiseDisplay(Math.max(30, Math.min(80, currentNoise)));
            }, 500);
        }

        function simulateNoiseLevel(level, environment) {
            updateNoiseDisplay(level);
            const status = document.getElementById('noiseStatus');
            status.innerHTML = `<span>🎯</span><span>${environment}检测完成</span>`;
        }

        function updateNoiseDisplay(decibel) {
            document.getElementById('decibelValue').textContent = decibel;
            
            const status = document.getElementById('noiseStatus');
            status.className = 'status-indicator';
            
            if (decibel <= 40) {
                status.classList.add('status-safe');
                status.innerHTML = '<span>✅</span><span>环境安静，适合休息</span>';
            } else if (decibel <= 60) {
                status.classList.add('status-warning');
                status.innerHTML = '<span>⚠️</span><span>噪音适中，注意保护听力</span>';
            } else {
                status.classList.add('status-danger');
                status.innerHTML = '<span>❌</span><span>噪音过大，影响健康</span>';
            }
        }

        function stopNoiseMonitoring() {
            if (noiseMonitoringInterval) {
                clearInterval(noiseMonitoringInterval);
                noiseMonitoringInterval = null;
            }
            if (audioContext) {
                audioContext.close();
                audioContext = null;
            }
        }

        // 光照检测功能
        function startLightDetection() {
            showPanel('lightPanel');
        }

        function startReadingLightTest() {
            showPanel('lightPanel');
            // 模拟阅读光线检测
            simulateLightLevel(500, '阅读环境');
        }

        function startScreenLightTest() {
            showPanel('lightPanel');
            // 模拟屏幕使用环境检测
            simulateLightLevel(200, '屏幕使用');
        }

        function startLightMonitoring() {
            // 尝试使用环境光传感器
            if ('AmbientLightSensor' in window) {
                try {
                    const sensor = new AmbientLightSensor();
                    sensor.addEventListener('reading', () => {
                        updateLightDisplay(sensor.illuminance);
                    });
                    sensor.start();
                } catch (error) {
                    simulateLightMonitoring();
                }
            } else {
                simulateLightMonitoring();
            }
        }

        function simulateLightMonitoring() {
            lightMonitoringInterval = setInterval(() => {
                const baseLight = 300;
                const variation = (Math.random() - 0.5) * 200;
                const currentLight = Math.round(baseLight + variation);
                updateLightDisplay(Math.max(50, Math.min(1000, currentLight)));
            }, 1000);
        }

        function simulateLightLevel(level, environment) {
            updateLightDisplay(level);
            showLightAdvice(level, environment);
        }

        function updateLightDisplay(lux) {
            document.getElementById('luxValue').textContent = lux;
            document.getElementById('brightnessValue').textContent = Math.round(lux / 10);
            document.getElementById('colorTempValue').textContent = 4000 + Math.round((lux - 300) / 10);
            document.getElementById('uvIndexValue').textContent = Math.max(0, Math.round(lux / 200));
            
            showLightAdvice(lux, '当前环境');
        }

        function showLightAdvice(lux, environment) {
            const adviceDiv = document.getElementById('lightAdvice');
            const adviceList = document.getElementById('lightAdviceList');
            
            let advice = [];
            
            if (lux < 200) {
                advice = [
                    '光线过暗，建议增加照明',
                    '长时间在暗环境下可能影响视力',
                    '建议使用台灯或增加室内照明'
                ];
            } else if (lux < 500) {
                advice = [
                    '光线适中，适合一般活动',
                    '如需阅读建议增加局部照明',
                    '注意避免屏幕反光'
                ];
            } else if (lux < 1000) {
                advice = [
                    '光线充足，适合阅读和工作',
                    '当前照明条件良好',
                    '注意定期休息眼部'
                ];
            } else {
                advice = [
                    '光线过强，建议适当遮挡',
                    '强光可能造成眼部疲劳',
                    '建议使用窗帘调节光线'
                ];
            }
            
            adviceList.innerHTML = advice.map(item => `<li>${item}</li>`).join('');
            adviceDiv.style.display = 'block';
        }

        function stopLightMonitoring() {
            if (lightMonitoringInterval) {
                clearInterval(lightMonitoringInterval);
                lightMonitoringInterval = null;
            }
        }

        // 温度估算功能
        function startTemperatureEstimation() {
            showPanel('temperaturePanel');
        }

        function startComfortTest() {
            showPanel('temperaturePanel');
            // 模拟舒适度评估
            calculateTemperature('comfort');
        }

        function startEnergyAdvice() {
            showPanel('temperaturePanel');
            // 模拟节能建议
            calculateTemperature('energy');
        }

        function calculateTemperature(mode = 'normal') {
            const city = document.getElementById('cityInput').value;
            const roomType = document.getElementById('roomType').value;
            const direction = document.getElementById('roomDirection').value;
            const floor = parseInt(document.getElementById('floorInput').value) || 5;
            
            // 模拟温度计算
            let baseTemp = 22; // 基础温度
            
            // 根据房间类型调整
            const roomAdjustment = {
                'living': 0,
                'bedroom': -1,
                'kitchen': 2,
                'bathroom': 1,
                'study': -0.5
            };
            
            // 根据朝向调整
            const directionAdjustment = {
                'south': 2,
                'north': -2,
                'east': 1,
                'west': 1,
                'southeast': 1.5,
                'southwest': 1.5
            };
            
            // 根据楼层调整
            const floorAdjustment = Math.max(-2, Math.min(2, (floor - 5) * 0.2));
            
            const estimatedTemp = baseTemp + 
                (roomAdjustment[roomType] || 0) + 
                (directionAdjustment[direction] || 0) + 
                floorAdjustment + 
                (Math.random() - 0.5) * 2;
            
            const finalTemp = Math.round(estimatedTemp * 10) / 10;
            
            updateTemperatureDisplay(finalTemp, mode);
        }

        function updateTemperatureDisplay(temp, mode) {
            document.getElementById('tempDisplay').textContent = temp + '°C';
            
            let description, advice;
            
            if (temp < 18) {
                description = '温度偏低';
                advice = [
                    '建议适当增加室内温度',
                    '可使用暖气或空调制热',
                    '注意保暖，避免感冒'
                ];
            } else if (temp < 22) {
                description = '温度适中';
                advice = [
                    '当前温度较为舒适',
                    '建议保持室内通风',
                    '注意适当增减衣物'
                ];
            } else if (temp < 26) {
                description = '温度舒适';
                advice = [
                    '温度非常适宜',
                    '无需调节空调',
                    '保持良好的室内环境'
                ];
            } else {
                description = '温度偏高';
                advice = [
                    '建议适当降低室内温度',
                    '可使用空调或风扇',
                    '注意多喝水，避免中暑'
                ];
            }
            
            if (mode === 'energy') {
                advice = [
                    '建议设置空调温度26°C',
                    '使用节能模式可节省20%电费',
                    '合理使用窗帘调节室温'
                ];
            }
            
            document.getElementById('tempDescription').textContent = description;
            document.getElementById('tempAdviceList').innerHTML = 
                advice.map(item => `<li>${item}</li>`).join('');
        }

        // 空气质量检测功能
        function startAirQualityTest() {
            alert('空气质量评估：\n🌿 PM2.5: 35 μg/m³ (良好)\n💨 PM10: 58 μg/m³ (良好)\n🌡️ 湿度: 45% (适宜)\n💡 建议：保持室内通风，定期清洁');
        }

        function startHumidityTest() {
            alert('湿度检测结果：\n💧 相对湿度: 45%\n✅ 湿度适宜 (40-60%)\n💡 建议：当前湿度良好，有利于健康');
        }

        function startVentilationTest() {
            alert('通风效果评估：\n🌬️ 空气流通: 良好\n🔄 换气次数: 0.8次/小时\n💡 建议：建议每天开窗通风2-3次，每次15-30分钟');
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化显示
            updateNoiseDisplay(45);
            updateLightDisplay(300);
            calculateTemperature();
        });
    </script>
</body>
</html>